<template>
  <div class="row">
    <div class="col">
      <img src="@/assets/images/chrome-logo-small.jpg" />
      <h2>{{detailData.cname}}</h2>
      <p>{{detailData.chromes}}</p>
      <button>
        <a :href='"https://www.google.cn/chrome/"' target="_blank">{{detailData.download}}</a>
      </button>
    </div>
    <div class="col">
      <img src="@/assets/images/firefox-logo-small.jpg" alt="firefox">
      <h2>{{detailData.fname}}</h2>
      <p>{{detailData.firefoxs}}</p>
      <button>
        <a :href='"http://www.firefox.com.cn/"' target="_blank">{{detailData.download}}</a>
      </button>
    </div>
    <div class="col">
      <img src="@/assets/images/ie-logo-small.jpg" alt="safari">
      <h2>{{detailData.iname}}</h2>
      <p>{{detailData.ies}}</p>
      <button>
        <a :href='"https://support.microsoft.com/zh-cn/help/17621/internet-explorer-downloads"' target="_blank">{{detailData.download}}</a>
      </button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeDetail',
  props: {
    detailData: Object
  }
}
</script>

<style lang="stylus" scoped>
  .row
    width: 100%
    display: flex
    margin: 3rem 0 0 0
    .col
      flex: 0.3333
      text-align: center
      img
        width: 8rem
        height: 8rem
      p
        width: 50%
        margin: 0 auto
        text-align: center
      button
        width: 18%
        height: 12%
        font-size: 0.8rem
        margin: 1rem 0 2rem 0
        background-color: #ccc
        border-radius: 10px
      button a:link,a:visited
        text-decoration: none
        color: black
      button a:hover,a:active
        text-decoration: none
        color: #fff
</style>
